<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      .progress {
        width: 500px;
        height: 5px;
        background-color: gray;
      }
      .progress div {
        height: 5px;
        width: 0;
        background-color: rgb(0, 182, 0);
      }
    </style>
  </head>
  <body>
    <!-- 
      视频音频 文档 ：https://www.runoob.com/tags/ref-av-dom.html
     -->
    <div id="app">
      <!-- timeupdate 播放时长发生变化 -->
      <video
        ref="vid"
        src="https://gd-sycdn.kuwo.cn/0ebba82c4631a7b736fe1abffc3422cf/653b574b/resource/m2/87/96/251911529.mp4"
        style="width: 500px"
        @timeupdate="timeupdate"
      ></video>
      <button @click="$refs.vid.play()">播放</button>
      <button @click="$refs.vid.pause()">暂停</button>
      <button @click="$refs.vid.currentTime=20">设置播放时长</button>
      <div class="progress" @click="to" ref="progress">
        <div :style="{width:percent}"></div>
      </div>
      <hr />
      <button @click="$refs.vid.requestFullscreen()">全屏</button>
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          percent: 0,
        };
      },
      methods: {
        // 时长(进度)发生变化
        timeupdate() {
          let { vid } = this.$refs;
          this.percent = (vid.currentTime / vid.duration) * 100 + "%";
        },
        to(e) {
          let { vid, progress } = this.$refs;
          let dis = e.clientX - progress.offsetLeft;
          let w = progress.offsetWidth;
          vid.currentTime = (dis / w) * vid.duration;
          this.percent = (vid.currentTime / vid.duration) * 100 + "%";
        },
      },
    });
    app = app.mount("#app");
  </script>
</html>
